<template>
	<view>
		<NavBar :isScroll="false" :placeholder="false" :isTitle="true" title="房间预定" />
		<view class="" style="width: 100%; height: 480rpx"></view>
		<!-- <image src="/static/img/navBar/headBgc.png" style="width: 100%; height: 480rpx" mode=""></image> -->
		<view class="reserveOrder-box">
			<view class="reserveOrder-item reserveOrder-top">
				<view class="reserveOrder-date zdy-flex zdy-flex-align-center" @click="dateShow = true">
					<span>{{ weekShow.startDay }}</span>
					<text>{{ weekShow.startWeek }}</text>
					<span style="margin: 0 30rpx">-</span>
					<span>{{ weekShow.endDay }}</span>
					<text>{{ weekShow.endWeek }}</text>
					<span class="zdy-flex zdy-flex-align-center" style="margin-left: auto">
						<span style="font-size: 24rpx">共{{ weekShow.totalDay }}晚</span>
						<u-icon size="12" name="arrow-right" bold></u-icon>
					</span>
				</view>
				<view class="room-name">优选大床房 • 无餐食</view>
				<view class="room-describe">大床 ︱ 2人入住 ︱ 有窗户 ︱ 不含早餐</view>
				<view class="cancel-describe">
					<image src="/static/img/my/fk.png" mode=""></image>
					<text>今天14:00前免费取消</text>
				</view>
			</view>
			<view class="reserveOrder-item enter-info">
				<view class="reserveOrder-item-title">入住信息</view>
				<u-cell-group :border="false">
					<u-cell title="住客姓名">
						<u--input slot="value" placeholder="请输入租客姓名" border="none"></u--input>
						<image slot="right-icon" style="width: 36rpx; height: 36rpx" src="/static/img/housing/lxr.png" mode=""></image>
					</u-cell>
					<u-cell title="身份证">
						<u--input slot="value" placeholder="请输入租客姓名" border="none"></u--input>
						<image slot="right-icon" style="width: 36rpx; height: 36rpx" mode=""></image>
					</u-cell>
					<u-cell title="联系电话" :border="false">
						<u--input slot="value" placeholder="请输入联系电话" border="none"></u--input>
						<image slot="right-icon" style="width: 36rpx; height: 36rpx" src="/static/img/housing/dh1.png" mode=""></image>
					</u-cell>
				</u-cell-group>
			</view>
			<view class="reserveOrder-item discounts">
				<view class="reserveOrder-item-title">本单可享</view>
				<u-cell-group :border="false">
					<u-cell :isLink="true" :clickable="false" :border="false" arrow-direction="right" @click="couponShow = priceList.length ? true : false" title="促销优惠">
						<view class="discounts-money" slot="value">
							<template v-if="discounts">
								<span class="discounts-price">-￥{{ discounts }}</span>
								<span>已享最大优惠</span>
							</template>
							<template v-else>
								<text v-if="priceList.length">可用优惠券{{ priceList.length }}张</text>
								<text v-else>暂无可用优惠券</text>
							</template>
						</view>
					</u-cell>
					<!-- 					<u-cell :isLink="true" :border="false" arrow-direction="right" title="可享权益">
						<u--input slot="value" placeholder="请输入租客姓名" border="none"></u--input>
					</u-cell> -->
				</u-cell-group>
			</view>
			<view class="submit-button zdy-flex zdy-flex-between zdy-safe-area-inset-bottom">
				<view class="submit-button-left">
					<view class="">
						<span class="total-prices-title">总价</span>
						<text>￥</text>
						<span class="total-prices">800.32</span>
					</view>
					<view class="diminished">已减￥351.68</view>
				</view>
				<view class="zdy-flex zdy-flex-align-center">
					<view class="detail zdy-flex zdy-flex-align-center" @click="pricesShow = !pricesShow">
						<span>明细</span>
						<u-icon size="8" name="arrow-up-fill" bold></u-icon>
					</view>
					<u-button size="large" @click="$tn('/order/paySuccess')" color="#FD5454">提交订单</u-button>
				</view>
			</view>
		</view>
		<!-- 价格明细 -->
		<u-popup :show="pricesShow" @close="pricesShow = false" :safeAreaInsetBottom="false">
			<view class="prices-pop" :style="{ marginBottom: submitHeight + 'px' }">
				<view class="prices-detail">
					<span class="title">费用明细</span>
					<span class="date">04月26日-04月28日</span>
					<span>共2晚</span>
				</view>
				<view class="roomName">双人大床房</view>
				<view class="prices-type">
					<view class="prices prices-item">
						<span class="title">房费</span>
						<span>
							<text>￥</text>
							800
						</span>
					</view>
					<view class="prices-item item-its">
						<span>04月26日</span>
						<span>
							<text>￥</text>
							800
						</span>
					</view>
					<view class="prices-item item-its">
						<span>04月26日</span>
						<span>
							<text>￥</text>
							800
						</span>
					</view>
				</view>
				<view class="prices-type">
					<view class="prices prices-item">
						<span class="title">优惠</span>
						<span class="discounts">
							<text>-￥</text>
							129
						</span>
					</view>
					<view class="prices-item item-its">
						<span>新人专属优惠</span>
						<span class="discounts">
							<text>-￥</text>
							129
						</span>
					</view>
					<view class="prices-item item-its">
						<span>连订95折</span>
						<span class="discounts">
							<text>-￥</text>
							30
						</span>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 优惠券弹窗 -->
		<view class="coupon-box">
			<u-popup :show="couponShow" @close="couponShow = false" :safeAreaInsetBottom="false">
				<view class="coupon-pop">
					<view class="title">可用优惠券</view>
					<view class="coupon-list">
						<view class="coupon-item zdy-flex zdy-flex-align-center" v-for="(item, index) in priceList" :key="index">
							<view class="zdy-flex zdy-flex-direction zdy-flex-align-center">
								<view class="price zdy-flex zdy-flex-center">
									<text class="icon">￥</text>
									<text>25</text>
								</view>
								<view class="describe">无门槛</view>
							</view>
							<view class="interval"></view>
							<view class="zdy-flex zdy-flex-direction" style="justify-content: center">
								<view class="price-title">新人专享优惠券</view>
								<view class="price-date">2024.05.01-2024.05.15</view>
								<!-- <view class="price-describe">查看详情</view> -->
							</view>
							<image :src="item.id == activedCoupon.id ? '/static/img/home/xz.png' : '/static/img/home/wxz.png'" @click="selectCoupon(item)" mode=""></image>
						</view>
					</view>
					<view class="couponSubmit" @click="couponShow = false">确定</view>
				</view>
			</u-popup>
		</view>
		<u-calendar closeOnClickOverlay @close="dateShow = false" color="#85DCD6" :show="dateShow" mode="range" @confirm="confirmDate"></u-calendar>
	</view>
</template>

<script>
import disposeDate from '@/mixins/disposeDate.js';
export default {
	mixins: [disposeDate],
	data() {
		return {
			params: {},
			pricesShow: false,
			submitHeight: '',
			activedCoupon: {}, //已选优惠券
			priceList: [
				{ amount: 120, id: 1 },
				{ amount: 220, id: 2 },
				{ amount: 320, id: 3 },
				{ amount: 120, id: 4 },
				{ amount: 220, id: 5 },
				{ amount: 320, id: 6 }
			], //可用优惠券
			couponShow: false //优惠券弹窗
		};
	},
	onLoad(params) {
		this.params = JSON.parse(params.params);
	},
	computed: {
		discounts() {
			return this.activedCoupon.amount || 0;
		}
	},
	mounted() {
		const that = this;
		//获取盒子高度
		wx.createSelectorQuery()
			.in(this)
			.select('.submit-button')
			.boundingClientRect(function (rect) {})
			.exec(function (res) {
				that.submitHeight = res[0].height;
			});
	},
	methods: {
		selectCoupon(item) {
			if (this.activedCoupon.id == item.id) {
				this.activedCoupon = {};
			} else {
				this.activedCoupon = item;
			}
		}
	}
};
</script>

<style>
page {
	background-color: #e6f8f7;
}
</style>

<style scoped lang="scss">
.reserveOrder-box {
	margin-top: -300rpx;
	.reserveOrder-item {
		padding: 30rpx 25rpx 10rpx;
		margin: 30rpx;
		background: #ffffff;
		border-radius: 16rpx;
		.reserveOrder-item-title {
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
		}
		::v-deep .u-cell__title-text.data-v-1c4434ae {
			font-size: 28rpx !important;
			color: #666666 !important;
		}
		::v-deep .u-cell__body {
			padding: 20rpx 0 !important;
		}
	}
	.reserveOrder-top {
		border-top: 10rpx #58d2c8 solid;
		.reserveOrder-date {
			margin-bottom: 40rpx;
			span {
				margin-right: 8rpx;
				font-weight: bold;
				font-size: 34rpx;
			}
			text {
				font-weight: 500;
				font-size: 24rpx;
			}
		}
		.room-name {
			font-weight: bold;
			color: #333333;
		}
		.room-describe {
			margin: 15rpx 0 30rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #666666;
		}
		.cancel-describe {
			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}
	}
	.enter-info,
	.discounts {
		::v-deep .u-input__content__field-wrapper__field {
			width: 380rpx;
		}
	}
	.discounts {
		background: linear-gradient(180deg, #def2f1 0%, #ffffff 20%, #ffffff 100%);
		.discounts-money {
			color: #fd5454;
			width: 380rpx;
			font-weight: 500;
			font-size: 24rpx;
			.discounts-price {
				margin-right: 40rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
			text {
				color: #c0c4cc;
				font-size: 30rpx;
			}
		}
		::v-deep .u-icon__icon--info {
			color: #333333;
			font-weight: bold !important;
		}
	}
	.submit-button {
		padding: 25rpx 25rpx 50rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		background-color: #ffffff;
		.submit-button-left {
			.total-prices-title {
				margin-right: 8rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
			}
			text {
				font-weight: bold;
				font-size: 24rpx;
				color: #ff3a3a;
			}
			.total-prices {
				font-family: DIN;
				font-weight: bold;
				font-size: 34rpx;
				color: #ff3a3a;
			}
			.diminished {
				width: fit-content;
				margin-top: 12rpx;
				font-weight: 500;
				font-size: 18rpx;
				color: #ff3a3a;
				padding: 5rpx 10rpx;
				background: #ffd9d9;
				border-radius: 4rpx;
			}
		}
		.detail {
			margin-right: 25rpx;
			font-size: 22rpx;
			color: #666666;
			span {
				width: max-content;
				margin-right: 8rpx;
			}
		}
		::v-deep .u-button--square {
			border-radius: 8rpx;
			padding: 30rpx 80rpx !important;
			font-weight: bold;
			font-size: 32rpx;
			color: #ffffff;
		}
	}
}
.prices-pop {
	border-bottom: 1rpx solid #eeeeee;
	padding: 30rpx;
	.title {
		margin-bottom: 50rpx;
		color: #333333;
		font-weight: bold;
		font-size: 34rpx;
	}
	.prices-detail {
		margin-bottom: 30rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		.date {
			margin: 0 25rpx;
		}
	}
	.roomName {
		margin-bottom: 40rpx;
		font-weight: bold;
		color: #333333;
	}
	.prices {
		font-weight: bold;
		text {
			font-size: 28rpx;
		}
		& > span:last-child {
			font-size: 36rpx;
		}
	}
	.prices-item {
		display: flex;
		justify-content: space-between;
	}
	.item-its {
		margin-bottom: 40rpx;
		text {
			display: inline-block;
			margin-right: 10rpx;
			font-weight: bold;
			font-size: 22rpx;
		}
	}
	.discounts {
		color: red;
	}
	.prices-type {
		padding-top: 30rpx;
		border-top: 1rpx solid #eeeeee;
		margin-bottom: 30rpx;
	}
}
.coupon-box {
	::v-deep .u-popup {
		position: relative;
		z-index: 99999;
	}
	.coupon-pop {
		background-color: #e6f8f7;

		padding: 30rpx;
		.title {
			text-align: center;
			margin: 0 auto 55rpx;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
		}
		.coupon-list {
			height: 850rpx;
			overflow-y: auto;
		}
		.coupon-item {
			position: relative;
			margin-bottom: 15rpx;
			padding: 0rpx 30rpx;
			height: 185rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			&::after,
			&::before {
				content: ' ';
				position: absolute;
				width: 40rpx;
				height: 20rpx;
				background-color: #e6f8f7;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				right: 0;
				transform: rotate(-90deg) translateY(50%);
			}
			&::before {
				left: 0;
				transform: rotate(90deg) translateY(50%);
			}
			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: auto;
				margin-right: 30rpx;
			}
			.describe {
				font-weight: 500;
				font-size: 22rpx;
				color: #ff3434;
			}
			.price {
				color: #ff3434;
				font-weight: bold;
				font-size: 68rpx;
				.icon {
					font-size: 40rpx;
				}
			}
			.interval {
				margin: 0 30rpx;
				height: 130rpx;
				border-left: 1px dashed #cccccc;
			}
			.price-title {
				font-weight: bold;
				font-size: 32rpx;
				color: #602a0c;
			}
			.price-date {
				margin: 10rpx 0;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
			.price-describe {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
			}
		}
		.couponSubmit {
			margin: 50rpx auto;
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #85dcd6;
			border-radius: 44rpx;
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
		}
	}
}
</style>
